<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="button" value="请求体查询" onclick="sendAjax()">
    <script>
        /* 
            请求体参数：http协议的规范，在请求报文具有请求体的请求类型(post、put)中，提供以报文内容作为载体的服务器参数发送方式
            html页面中，只能通过form标签发送post请求构建请求体参数 
            
        */


      
            function sendAjax() {
                let xhr = new XMLHttpRequest();
                xhr.open("post", "/params/body");

              /*   
                告知服务器参数为普通文本，请求以request payload传递
                    设置为普通字符格式，如果参数不符合要求，js会强制类型转换
                    如果参数格式不是FormData构造器构建的数据，text/plain将作为ajax请求参数类型的默认值
                    
              */

                // xhr.setRequestHeader("Content-Type","text/plain;charset=utf8");

               /*  
                告知服务器参数为JSON格式字符串，请求以request payload传递 
                    设置为JSON字符格式，如果参数不符合要求，服务器将返回400错误要求
                
                */
                // xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8");


                /* 
                    告知服务器参数为表单数据格式，请求以Form Data传递 
                        设置为表单参数，这类参数必须使用urlencoded规则参数格式字符串
                        urlencoded规则参数格式：请求查询参数的格式，参数名1=参数值1&参数名2=参数值2
                        传递的参数将以上述格式作为转换依据进行参数分解
                
                */
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                // let params = "文本参数";
                // let params="[10,20,30]";
                // let params='{"name":"alice","age":20}';
                let params="name=alice&sex=male&hobby=playgames";
                xhr.onload = function () {
                    console.log(xhr.responseText);
                };
                // xhr.send(params)，params为请求携带的请求体参数，params只接收string类型数据，如果参数类型不是string，会强制转换
                xhr.send(params);
            }
        



    </script>
</body>

</html>